<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
        .background{
            width: 852px;
            height: 69px;
            padding: 10px;
            margin: 100px auto;
            background-image: url(images/bg.png);
        }
        ul{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        ul::after{
            content: '';
            display: block;
            clear: both;
        }
        .default{
            width: 224px;
            height: 100%;
        }
        .default > .big{
            display: inline-block;
        }
        .default > .small{
            display: none;
        }
        .big{
            display: none;
        }
        .small{
            width: 69px;
            height: 69px;
        }
        li{
            list-style: none;
            margin-right: 10px;
            width: 69px;
            height: 69px;
            float: left;
        }
        img{
            width: 100%;
        }
        
    </style>
</head>
<body>
    <div class="background">
        <ul class="wrapper">
            <li class="default">
                <img src="images/c1.jpg"  class="small">
                <img src="images/c.png" class="big">
            </li>
            <li>
                <img src="images/h1.jpg" class="small">
                <img src="images/h.png" class="big">
            </li>
            <li>
                <img src="images/l1.jpg" class="small">
                <img src="images/l.png" class="big">
            </li>
            <li>
                <img src="images/w1.jpg" class="small">
                <img src="images/w.png" class="big">
            </li>
            <li>
                <img src="images/z1.jpg" class="small">
                <img src="images/z.png" class="big">
            </li>
            <li>
                <img src="images/t1.jpg" class="small">
                <img src="images/t.png" class="big">
            </li>
            <li>
                <img src="images/m1.jpg" class="small">
                <img src="images/m.png" class="big">
            </li>
        </ul>
    </div>

    <script>
        $(function(){
            $('li').mouseover(function(){
                var index = $(this).index;
                $(this).stop().animate({
                    width: 224
                },200).find('.big').stop().fadeIn().siblings('.small').stop().fadeOut();
                $(this).siblings().stop().animate({
                    width: 69
                },200).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
            });
        });
    </script>
</body>
</html>